@charset "utf-8";
@import "common";
@import "reset";
.allBg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../img/indexBg.png) 50% 50%/cover;
    //首页
    .indexWeb {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        .logo {
            width: 95%;
            position: absolute;
            top: r(10);
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .bottle {
            margin-top: r(300);
            height: r(413);
            @include aImg;
            z-index: 2;
            img {
                height: 100%;
            }
        }
        .button1 {
            width: r(329);
            position: absolute;
            left: 50%;
            bottom: r(153);
            transform: translateX(-50%);
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .button2 {
            width: r(329);
            position: absolute;
            left: 50%;
            bottom: r(25);
            transform: translateX(-50%);
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .play {
            width: r(209);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .bgActive {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            opacity: .8;
            animation: rotate 6s infinite linear;
            @keyframes rotate {
                0% {
                    transform: rotate(0);
                }
                25% {
                    transform: rotate(90deg);
                }
                50% {
                    transform: rotate(180deg);
                }
                75% {
                    transform: rotate(270deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            img {
                width: 100%;
                height: 100%;
                transform: scale(3);
            }
        }
        .whiteBg {
            width: 100%;
            height: 105%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            opacity: .2;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    //游戏说明
    .gameDescription {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .description {
            margin: 0 auto;
            width: 92.03125%;
            height: 100%;
            @include aImg;
            img {
                width: 100%;
            }
        }
    }
    //摇动页面
    .shakeWeb {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .lodingBorder {
            width: 88.75%;
            margin: r(20) auto 0;
            position: relative;
            overflow: hidden;
            img:first-of-type {
                width: 100%;
                position: relative;
                z-index: 3;
            }
            .loading {
                width: 76%;
                height: r(85);
                background: #80471a;
                position: absolute;
                left: 59.5%;
                top: 42.8%;
                transform: translate(-50%, -50%);
                z-index: 1;
                float: right;
                border-bottom-right-radius: 50px;
                border-top-right-radius: 50px;
                overflow: hidden;
                img {
                    height: 100%;
                    transform: translateX(-100%);
                    transition: transform .5s;
                    -webkit-transition: transform .5s;
                }
            }
        }
        .shakeBottle {
            width: 53.90625%;
            height: r(622);
            margin: 0 auto;
            position: relative;
            img:first-of-type {
                position: absolute;
                width: 100%;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
            .shakePhone {
                width: r(155);
                height: r(146);
                @include aImg;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                img {
                    width: 100%;
                }
            }
        }
        .boom {
            width: 30.46875%;
            position: absolute;
            left: r(13);
            bottom: r(28);
            img {
                width: 100%;
            }
        }
        .hand {
            width: 39.375%;
            height: r(232);
            position: absolute;
            right: -8%;
            bottom: r(278);
            img {
                width: 100%;
            }
        }
        .hurryUp1 {
            position: absolute;
            left: 10.9375%;
            top: r(429);
            width: 22.1875%;
            height: r(47);
            img {
                width: 100%;
            }
        }
        .hurryUp2 {
            position: absolute;
            right: 9.375%;
            top: r(237);
            width: 21.40625%;
            height: r(83);
            img {
                width: 100%;
            }
        }
        .hurryUp3 {
            position: absolute;
            right: 9.375%;
            top: r(567);
            width: 22.1875%;
            height: r(47);
            img {
                width: 100%;
            }
        }
        .hurryUp4 {
            position: absolute;
            left: 9.375%;
            top: r(173);
            width: 31.09375%;
            height: r(107);
            img {
                width: 100%;
            }
        }
        .countBack {
            width: 100%;
            height: 100%;
            background: rgba(00, 00, 00, .8);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 5;
            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
    //太菜了
    .soBad {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        img:first-of-type {
            height: 100%;
        }
        .lodingBorder {
            width: 88.75%;
            top: r(22);
            left: 5.46875%;
            position: absolute;
            overflow: hidden;
            img:first-of-type {
                width: 100%;
                position: relative;
                z-index: 2;
            }
            .loading {
                width: 76%;
                height: r(85);
                background: #80471a;
                position: absolute;
                left: 59.5%;
                top: 42.8%;
                transform: translate(-50%, -50%);
                z-index: 1;
                float: right;
                border-bottom-right-radius: 50px;
                border-top-right-radius: 50px;
                overflow: hidden;
                img {
                    height: 100%;
                    transform: translateX(-100%);
                    transition: transform 3s;
                    -webkit-transition: transform 3s;
                }
            }
        }
        .music {
            width: 11.09375%;
            height: r(51);
            position: absolute;
            left: 4.21875%;
            bottom: r(28);
            img {
                width: 100%;
            }
        }
        .again {
            width: 53.75%;
            height: r(113);
            position: absolute;
            bottom: r(14);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
    }
    //不错呦
    .soGood {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        img:first-of-type {
            height: 100%;
        }
        .lodingBorder {
            width: 88.75%;
            top: r(22);
            left: 5.46875%;
            position: absolute;
            overflow: hidden;
            img:first-of-type {
                width: 100%;
                position: relative;
                z-index: 2;
            }
            .loading {
                width: 76%;
                height: r(85);
                background: #80471a;
                position: absolute;
                left: 59.5%;
                top: 42.8%;
                transform: translate(-50%, -50%);
                z-index: 1;
                float: right;
                border-bottom-right-radius: 50px;
                border-top-right-radius: 50px;
                overflow: hidden;
                img {
                    height: 100%;
                    transition: transform 3s;
                    -webkit-transition: transform 3s;
                    transform: translateX(-100%);
                }
            }
        }
        .music {
            width: 11.09375%;
            height: r(51);
            position: absolute;
            left: 4.21875%;
            bottom: r(28);
            img {
                width: 100%;
            }
        }
        .again {
            width: 53.75%;
            height: r(113);
            position: absolute;
            bottom: r(14);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
    }
    //太棒了
    .soWell {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        img:first-of-type {
            height: 100%;
        }
        .lodingBorder {
            width: 88.75%;
            top: r(22);
            left: 5.46875%;
            position: absolute;
            overflow: hidden;
            img:first-of-type {
                width: 100%;
                position: relative;
                z-index: 2;
            }
            .loading {
                width: 76%;
                height: r(85);
                background: #80471a;
                position: absolute;
                left: 59.5%;
                top: 42.8%;
                transform: translate(-50%, -50%);
                z-index: 1;
                float: right;
                border-bottom-right-radius: 50px;
                border-top-right-radius: 50px;
                overflow: hidden;
                img {
                    height: 100%;
                    transition: transform 3s;
                    -webkit-transition: transform 3s;
                    transform: translateX(-100%);
                }
            }
        }
        .music {
            width: 11.09375%;
            height: r(51);
            position: absolute;
            left: 4.21875%;
            bottom: r(28);
            img {
                width: 100%;
            }
        }
        .draw {
            width: 53.75%;
            height: r(113);
            position: absolute;
            bottom: r(14);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
    }
    //100%
    .fullPresent {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        img:first-of-type {
            height: 100%;
        }
        .lodingBorder {
            width: 88.75%;
            top: r(22);
            left: 5.46875%;
            position: absolute;
            overflow: hidden;
            img:first-of-type {
                width: 100%;
                position: relative;
                z-index: 2;
            }
            .loading {
                width: 76%;
                height: r(85);
                background: #80471a;
                position: absolute;
                left: 59.5%;
                top: 42.8%;
                transform: translate(-50%, -50%);
                z-index: 1;
                float: right;
                border-bottom-right-radius: 50px;
                border-top-right-radius: 50px;
                overflow: hidden;
                img {
                    height: 100%;
                    transition: transform 3s;
                    -webkit-transition: transform 3s;
                    transform: translateX(-100%);
                }
            }
        }
        .music {
            width: 11.09375%;
            height: r(51);
            position: absolute;
            left: 4.21875%;
            bottom: r(28);
            img {
                width: 100%;
            }
        }
        .draw {
            width: 53.75%;
            height: r(113);
            position: absolute;
            bottom: r(14);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
    }
    //抽取葡萄力页
    .drawPuTaoLi {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: url(../img/drawBg.png) 50% 50%/cover;
        position: relative;
        .drawtext {
            width: 78.75%;
            margin: r(85) auto 0;
            img {
                width: 100%;
            }
        }
        .PuTaoLi {
            font-size: 0;
            div {
                display: inline-block;
                width: 48%;
                height: r(258);
                margin-top: r(77);
                text-align: center;
                img {
                    height: 100%;
                }
            }
        }
    }
    //三等奖
    .third {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: url(../img/drawBg.png) 50% 50%/cover;
        position: relative;
        .congratulationThird {
            width: 72.96875%;
            margin: r(90) auto r(58);
            img {
                width: 100%;
            }
        }
        .PuTaoLi {
            height: r(337);
            text-align: center;
            img {
                height: 100%;
            }
        }
        .fiveDiscount {
            height: r(80);
            margin: r(13) auto 0;
            text-align: center;
            img {
                height: 100%;
            }
        }
        .rightNow {
            width: 62.1875%;
            margin: r(18) auto;
            img {
                width: 100%;
            }
        }
    }
    //二等奖
    .second {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: url(../img/drawBg.png) 50% 50%/cover;
        position: relative;
        .congratulationSecond {
            width: 72.96875%;
            margin: r(90) auto r(58);
            img {
                width: 100%;
            }
        }
        .aBoxPuTaoLi {
            width: 61.09375%;
            margin: 0 auto;
            text-align: center;
            img {
                width: 100%;
            }
        }
        .writeInfo {
            width: 84.6875%;
            margin: r(62) auto 0;
            text-align: center;
            img {
                width: 100%;
            }
        }
    }
    //填写信息页面
    .infoWeb {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: url(../img/indexBg.png) 50% 50%/cover;
        position: relative;
        font-size: r(30);
        color: white;
        p {
            font-size: r(43);
            color: white;
            margin-top: r(89);
            text-align: center;
        }
        input {
            width: 75%;
            height: r(40);
            border-radius: 5px;
            font-size: r(30);
            margin-top: r(43);
            padding-left: 5px;
            padding-top: 5px;
        }
        textarea {
            height: r(148);
            width: 75%;
            border-radius: 5px;
            font-size: r(30);
            margin-top: r(43);
            padding-left: 5px;
            padding-top: 5px;
            resize: none;
        }
        .address {
            span {
                float: left;
                margin-top: r(43);
            }
        }
        .submit{
            width: 63.125%;
            height: r(127);
            margin: r(52) auto 0;
            img{
                width: 100%;
            }
        }
    }
    .otherWebBg {
        background: url(../img/otherWebBg.png) 50% 50%/cover;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        .shareWeb{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            .putaoli{
                margin: 0 auto;
                width: 35.3125%;
                height: r(674);
                img{
                    width: 100%;
                    margin-top: r(186);
                }
            }
            .shareBg{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                text-align: center;
                background: rgba(0,0,0,.7);
                
                img{
                    width: 100%;
                    margin-top: r(400);
                }
            }
        }
        .noReward{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            .alittle{
                width: 87.96875%;
                height: r(104);
                margin: r(215) auto 0;
                img{
                    width: 100%;
                }
            }
            .again,.callF{
                width: 64.21875%;
                height: r(104);
                margin: r(130) auto r(30);
                img{
                    width: 100%;
                }
            }
            .callF{
                margin: 0 auto;
                position: relative;
                z-index: 1;
            }
            .buttomputaoli{
                height: r(596);
                width: 43.59375%;
                position: absolute;
                right: -7.8125%;
                bottom: r(-65);
                z-index: 0;
                img{
                    width: 100%;
                }
            }
        }
    }
}